<template>
    <div>
        <h5>
            欢迎光临-vue开发的收银系统-水果店
        </h5>
        <table>
            <tr>
                <td>苹果{{price}} ￥/斤，折扣价&lt;{{num}}折&gt;
                </td>

            </tr>
            <tr>
                <td>请输入你要买的斤数 <input type="text" v-model="n"></td>
            </tr>
            <tr>
                <td><button @click="sum">结账买单~</button></td>
            </tr>
            <tr>
                <td>
                    结账单：总价：{{x}} ￥元 折后价：{{y}}￥元 省了{{z}}￥元
                </td>
            </tr>
        </table>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                price: 10,
                num: 8,
                n: 0,
                x: 0,
                y: 0,
                z: 0
            }
        },
        methods: {
            sum() {
                this.x = this.price * this.n;
                this.y = this.price * this.num / 10 * this.n
                this.z = this.x - this.y
            }
        }

    }
</script>

<style>

</style>